<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico?v=5.1.1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Vendor styles -->
    <link rel="stylesheet" href="/js/bower_components/material-design-iconic-font/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="/js/bower_components/animate.css/animate.min.css">
    <link rel="stylesheet" href="/js/bower_components/jquery.scrollbar/jquery.scrollbar.css">

    <!-- App styles -->
    <link rel="stylesheet" href="/css/app.min.css">
    <link rel="stylesheet" href="/js/vue/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-tabs__header{width:224px;border-right:1px solid #f0f0f0}.el-tabs__nav-wrap{border:0}.el-tabs--left .el-tabs__item.is-left{padding-left:24px;text-align:left}.el-tabs__item:after{transform:scaleY(1);opacity:1;transition:transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);position:absolute;top:0;right:0;bottom:0;border-right:3px solid #1890ff;transform:scaleY(.0001);opacity:0;transition:transform .15s cubic-bezier(.215,.61,.355,1),opacity .15s cubic-bezier(.215,.61,.355,1);content:""}.el-tabs__item.is-active{font-weight:700;background-color:#e6f7ff}.el-tabs__item{font-variant:tabular-nums;font-feature-settings:"tnum","tnum";font-weight:500;color:rgba(0,0,0,.65);font-size:14px;text-align:left;list-style:none}.el-tabs__content{flex:1 1;padding:8px 40px}
        h4.tab-header{margin-bottom:12px;color:rgba(0,0,0,.85);font-weight:500;font-size:20px;line-height:28px}.tab-view{display:flex;padding-top:12px}.tab-left{min-width:280px;max-width:448px}.tab-right{flex:1 1;padding-left:104px}
        .avatar-img{width:100px;height:100px;display:inline-block;margin:10px;overflow:hidden;position:relative;border-radius:5%}.avatar-img img{width:100px;height:100px;z-index:1}.avatar-img img:hover{cursor:pointer}.avatar-img-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.avatar-img-label .el-icon-check{font-size:12px;margin-top:12px;transform:rotate(-45deg);color:#fff}
    </style>
</head>

<body data-ma-theme="green">
<main class="main">
    <div class="page-loader">
        <div class="page-loader__spinner">
            <svg viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
            </svg>
        </div>
    </div>

    <header class="header">
        <div class="navigation-trigger hidden-xl-up" data-ma-action="aside-open" data-ma-target=".sidebar">
            <div class="navigation-trigger__inner">
                <i class="navigation-trigger__line"></i>
                <i class="navigation-trigger__line"></i>
                <i class="navigation-trigger__line"></i>
            </div>
        </div>

        <div class="header__logo hidden-sm-down">
            <h1><a href="/tumo">Tumo Blog v3.0</a></h1>
        </div>

        <ul class="top-nav">
            <li class="dropdown hidden-xs-down">
                <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-item theme-switch">
                        Theme Switch
                        <div class="btn-group btn-group--colors mt-2" data-toggle="buttons">
                            <label class="btn bg-green active waves-effect"><input type="radio" value="green" autocomplete="off" checked=""></label>
                            <label class="btn bg-blue waves-effect"><input type="radio" value="blue" autocomplete="off"></label>
                            <label class="btn bg-red waves-effect"><input type="radio" value="red" autocomplete="off"></label>
                            <label class="btn bg-orange waves-effect"><input type="radio" value="orange" autocomplete="off"></label>
                            <label class="btn bg-teal waves-effect"><input type="radio" value="teal" autocomplete="off"></label>
                            <br>
                            <label class="btn bg-cyan waves-effect"><input type="radio" value="cyan" autocomplete="off"></label>
                            <label class="btn bg-blue-grey waves-effect"><input type="radio" value="blue-grey" autocomplete="off"></label>
                            <label class="btn bg-purple waves-effect"><input type="radio" value="purple" autocomplete="off"></label>
                            <label class="btn bg-indigo waves-effect"><input type="radio" value="indigo" autocomplete="off"></label>
                            <label class="btn bg-lime waves-effect"><input type="radio" value="lime" autocomplete="off"></label>
                        </div>
                    </div>
                    <a href="" class="dropdown-item">Fullscreen</a>
                    <a href="" class="dropdown-item">Clear Local Storage</a>
                </div>
            </li>
        </ul>
    </header>

    <aside class="sidebar">
        <div class="scrollbar-inner">
            <div class="user">
                <div class="user__info" data-toggle="dropdown">
                    <img class="user__img" th:src="${user.avatar}" alt="">
                    <div>
                        <div class="user__name">[[${user.username}]]</div>
                        <div class="user__email">[[${user.email}]]</div>
                    </div>
                </div>

                <div class="dropdown-menu">
                    <a class="dropdown-item" href="/tumo/profile">账户设置</a>
                    <a class="dropdown-item" href="/logout">注销</a>
                </div>
            </div>

            <ul class="navigation">
                <li><a href="/tumo"><i class="zmdi zmdi-home"></i> 主页</a></li>

                <li class="navigation__sub">
                    <a href=""><i class="zmdi zmdi-book"></i>文章管理</a>

                    <ul>
                        <li><a href="/tumo/article/write">发布文章</a></li>
                        <li><a href="/tumo/article/list">文章列表</a></li>
                    </ul>
                </li>

                <li class="navigation__sub">
                    <a href=""><i class="zmdi zmdi-view-week"></i>博客管理</a>

                    <ul>
                        <li><a href="/tumo/blog/tag">标签管理</a></li>
                        <li><a href="/tumo/blog/category">分类管理</a></li>
                        <li><a href="/tumo/blog/link">友链管理</a></li>
                        <li><a href="/tumo/blog/comment">评论管理</a></li>
                    </ul>
                </li>

                <li class="navigation__sub">
                    <a href=""><i class="zmdi zmdi-settings"></i>系统管理</a>

                    <ul>
                        <li><a href="/tumo/setting/log">操作日志</a></li>
                        <li><a href="/tumo/setting/qiniu">七牛云</a></li>
                        <li><a href="/tumo/setting/swagger">Swagger</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </aside>

    <section class="content" id="app">

        <div th:replace="tumo/profile/components/container"></div>
        <div th:replace="tumo/profile/components/form"></div>

        <footer class="footer hidden-xs-down">
            <p>© Tumo Blog. All rights reserved.</p>
            <ul class="nav footer__nav">
                <a class="nav-link" href="https://github.com/TyCoding/tumo" target="_blank">Tumo</a>
                <a class="nav-link" href="https://tycoding.cn/" target="_blank">Blog</a>
                <a class="nav-link" href="https://github.com/TyCoding" target="_blank">Github</a>
            </ul>
        </footer>
    </section>
</main>

<!-- Javascript -->
<!-- Vendors -->
<script src="/js/bower_components/jquery/jquery.min.js"></script>
<script src="/js/bower_components/tether/js/tether.min.js"></script>
<script src="/js/bower_components/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/bower_components/Waves/waves.min.js"></script>
<script src="/js/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="/js/bower_components/jquery.scrollbar/jquery-scrollLock.min.js"></script>
<script src="/js/bower_components/Waves/waves.min.js"></script>

<!-- App functions and actions -->
<script src="/js/app.min.js"></script>
<script src="/js/vue/vue.min.js"></script>
<script src="/js/vue/vue-resource.min.js"></script>
<script src="/js/vue/element-ui/lib/index.js"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data() {
            var validateName = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入登录账户'));
                } else {
                    this.$http.get('/user/checkName?username=' + value).then(res => {
                        if (res.body.data != null) {
                            callback(new Error('该用户名已存在'));
                        } else {
                            callback();
                        }
                    }).catch(() => {
                        callback(new Error('服务器错误'));
                    })
                }
            };
            var validateRePass = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入原密码'));
                } else {
                    if (this.passForm.password != value) {
                        callback(new Error('两次输入的密码不一致'));
                    }
                    callback();
                }
            };
            return {
                form: {},
                passForm: {},
                rulesBase: {
                    username: [
                        {validator: validateName, required: true, trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, type: 'email', message: '请输入真实姓名', trigger: 'blur'}
                    ],
                },
                rulesPass: {
                    password: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    rePass: [
                        {validator: validateRePass, required: true, trigger: 'blur'}
                    ],
                },
                list: [],
                pageConf: {
                    page: 1,
                    limit: 8,
                    total: 12,
                },
                query: {},
                dialogVisible: false,
                avatar: '',
                fileList: [
                    '/img/avatar/20180414165754.jpg',
                    '/img/avatar/20180414165815.jpg',
                    '/img/avatar/20180414165821.jpg',
                    '/img/avatar/20180414165827.jpg',
                    '/img/avatar/20180414165834.jpg',
                    '/img/avatar/20180414165840.jpg',
                    '/img/avatar/20180414165846.jpg',
                    '/img/avatar/20180414165855.jpg',
                    '/img/avatar/20180414165909.jpg',
                    '/img/avatar/20180414165914.jpg',
                    '/img/avatar/20180414165920.jpg',
                    '/img/avatar/20180414165927.jpg',
                    '/img/avatar/20180414165936.jpg',
                    '/img/avatar/20180414165942.jpg',
                    '/img/avatar/20180414165947.jpg',
                    '/img/avatar/20180414165955.jpg',
                    '/img/avatar/20180414170003.jpg',
                    '/img/avatar/default.jpg',
                ],
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            handleClose() {
                this.dialogVisible = false
            },
            fetchData() {
                this.$http.get(
                    '/user/info'
                ).then(res => {
                    if (res.body.code == 200) {
                        this.form = res.body.data
                    } else {
                        this.$message.error(res.body.msg)
                    }
                })
                this.$http.post(
                    '/loginlog/list?page=' + this.pageConf.page + '&limit=' + this.pageConf.limit,
                    JSON.stringify(this.query)
                ).then(res => {
                    if (res.body.code == 200) {
                        this.list = res.body.data.rows
                        this.pageConf.total = res.body.data.total
                    } else {
                        this.$message.error(res.body.msg)
                    }
                })
            },
            handleAvatar(){
                this.avatar = this.form.avatar
                this.dialogVisible = true
            },
            handleClick(url) {
                if(this.avatar == url) {
                    this.avatar = ''
                } else {
                    this.avatar = url
                }
            },
            changeAvatar() {
                this.$http.put(
                    '/user',
                    JSON.stringify({
                        id: this.form.id,
                        avatar: this.avatar
                    })
                ).then(res => {
                    if (res.body.code == 200) {
                        this.dialogVisible = false
                        this.$confirm('更新用户头像成功，重新登录后生效，立即重新登录？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'success',
                        }).then(() => {
                            window.location.href = '/logout'
                        })
                    } else {
                        this.$message.error(res.body.msg)
                    }
                })
            },

            handleUpdate(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.put(
                            '/user',
                            JSON.stringify(this.form)
                        ).then(res => {
                            if (res.body.code == 200) {
                                this.$alert('更新用户信息成功，立即重新登录？', '提示', {
                                    confirmButtonText: '确定',
                                    type: 'success',
                                }).then(() => {
                                    window.location.href = '/logout'
                                })
                            } else {
                                this.$message.error(res.body.msg)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleUpdatePass(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.put(
                            '/user/changePass',
                            JSON.stringify(this.passForm)
                        ).then(res => {
                            if (res.body.code == 200) {
                                this.$alert('修改账户密码成功，立即重新登录？', '提示', {
                                    confirmButtonText: '确定',
                                    type: 'success',
                                }).then(() => {
                                    window.location.href = '/logout'
                                })
                            } else {
                                this.$message.error(res.body.msg)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleDel(id) {
                this.$confirm('你确定永久删除此数据？, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(
                        '/loginlog/' + id
                    ).then(res => {
                        if (res.body.code == 200) {
                            this.fetchData();
                            this.$message.success('删除成功')
                        } else {
                            this.$message.error(res.body.msg)
                        }
                    })
                }).catch(() => {
                    this.$message.info('已取消删除')
                });
            },

            handleSizeChange(val) {
                this.pageConf.limit = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.pageConf.page = val;
                this.fetchData()
            },
        },
    })
</script>
</body>
</html>
